<template>
    <div>
        <v-header title="交易记录"></v-header>
        <ul class="zong">
            <li>
                <div>总盈亏</div>
                <span style="color:#259E26;">6400.00</span>
            </li>
            <li>
                <div>总单数</div>
                <span style="color:red;">3</span>
            </li>
            <li>
                <div>总手数</div>
                <span style="color:red;">9</span>
            </li>
        </ul>
        <div class="biao">
            <table>
                <thead>
                    <tr>
                        <th>日期</th>
                        <th>商品</th>
                        <th>类型</th>
                        <th>盈亏</th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in JiaoYi" :key="index" @click="To详细(item.ddh订单号)"> 
                        <td>{{item.rq日期}}</td>
                        <td>{{item.sp商品}}</td>
                        <td>{{item.ss手数}}
                            <span style="color:red">{{item.mm买卖}}</span>
                        </td>
                        <td>
                            <span style="color:red" v-if="item.yk盈亏 < 0">{{item.yk盈亏}}</span>
                            <span style="color:#259E26;" v-if="item.yk盈亏 >= 0">{{item.yk盈亏}}</span>
                        </td>
                    </tr>
                </tbody>
            </table>
        </div>
    </div>
</template>

<script>
import vHeader from '../../Common/vHeader';
    export default {
        data() {
            return {
                JiaoYi: [
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'300.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'-3000.00'
                    },
                    {
                        ddh订单号:'CP1711231825126627',
                        rq日期:'08-03 20:37:12',
                        sp商品:'比特币BTC',
                        ss手数:'1',
                        mm买卖:'买入',
                        yk盈亏:'12300.00'
                    },
                ]
            }
        },
        methods: {
            To详细(value) {
                // 将订单号传递给详情页
                this.$router.push({path:'JiaoYiInfo',query:{ddh:value}});
            },
        },
        components: {
            vHeader,
        },
    }
</script>

<style scoped>
.zong{
    list-style: none;
    display: flex;
    justify-content: space-around;
    background-color: #EAEEEF;
    height: 10vh;
    align-items: center;
    text-align: center;
}
.biao{
    width: 100vw;    
    height: calc(100vh - 10vh - 2.5rem - 3rem);
    overflow-y: scroll;
}
table{
    width: 100vw;
    text-align: center;
    color: #aaaaaa;
    border-collapse: collapse;
}
thead>tr{
    background-color: #F5F5F9;
    line-height: 2.5rem;
}
tbody>tr{
    line-height: 2rem;
}
</style>